<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2023-03-15 15:34:35
 * @LastEditTime: 2023-03-15 18:29:58
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 角色切换
 * @FilePath: \vue3-element-plus-web\src\views\Layouts\Admin\components\RoleSwitch\Dialog.vue
 * Copyright 版权声明
-->
<template>

  <el-dialog
    v-if="dialogVisible"
    title="选择角色"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :show-close="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    width="500px"
  >
    <el-form
      :rules="rules"
      ref="dataForm"
      :model="temp"
      label-width="120px"
      style='width:100%;'
    >
      <el-form-item label="选择角色：" prop="roleId">
        <el-select v-model="temp.roleId" placeholder="请选择角色">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import router from '@/router'

export default {
  name: 'Dialog',
  computed: {
    ...mapGetters([
      'roleSwitch',
      'userInfo'
    ]),
    roleList() {
      return this.userInfo.roles || []
    }
  },
  data() {
    return {
      btnLoading: false,
      dialogVisible: true,
      temp: {
        roleId: ''
      },
      rules: {
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.dialogVisible = this.roleSwitch && this.roleList.length > 1
  },
  methods: {
    handleConfirm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.$store.dispatch('SelectRole', this.temp).then(() => {
            // 判断当前用户是否已拉取完user_info信息
            this.$store
              .dispatch('GetUserInfo')
              .then((res) => {
                // 拉取user_info
                const menus = res.data.menus
                // 根据 menus 权限生成可访问的路由表
                this.$store
                  .dispatch('GenerateRoutes', { menus })
                  .then(() => {
                    if (this.$store.getters.addRouters.length > 0) {
                      for (const item of this.$store.getters.addRouters) {
                        router.addRoute(item) // 动态添加可访问路由表
                      }
                    }
                    this.btnLoading = false
                    this.dialogVisible = false
                    this.$notify({
                      title: '提示',
                      message: '切换角色成功',
                      type: 'success',
                      duration: 2000,
                      position: 'bottom-right'
                    })
                  })
                  .catch((err) => {
                    err
                  })
              })
              .catch((err) => {
                err
              })
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>

